////
/// Components
/// StackedList props
////

$stacked-list-header: (
  padding: (
    base: get-spacing(tighter) + get-border(thin),
    tablet: get-spacing(tighter) + get-border(),
  ),
);

@function stacked-list-header($group: $threads-default-value, $variant: $threads-default-value) {
  @return threads-value-get($stacked-list-header, $group, $variant);
}

// using static values instead of `rows()`
// will consider switching later when I have more time
$stacked-list-item: (
  base: (
    base: 7.2rem,
    desktop: 8.6rem,
  ),
  medium: (
    base: 10rem,
    desktop: 16.4rem,
  ),
  large: (
    base: 14.4rem,
    desktop: 20.6rem,
  ),
);

@function stacked-list-item($group: $threads-default-value, $variant: $threads-default-value) {
  @return threads-value-get($stacked-list-item, $group, $variant);
}

///
/// Mixins
@mixin stacked-list-scroll-height($size: stacked-list-item(), $rows: 6, $border-width: thin) {
  height: ($size * $rows) - (get-border($border-width) * ($rows - 1));
}

@mixin scroll-indicator($vertical: true) {
  content: '';
  position: absolute;
  display: block;
  background-color: currentColor;
  transition: color get-duration(fast) get-easing(), opacity get-duration() get-easing();

  @if $vertical {
    right: 0;
    bottom: 0;
    left: 0;
    height: get-border(thin);
  } @else {
    top: 0;
    right: 0;
    bottom: 0;
    width: get-border(thin);
  }

  @media screen and (min-width: get-breakpoint(tablet)) {
    @if $vertical {
      height: get-border();
    } @else {
      width: get-border();
    }
  }
}
